<template>
  <PageBox :data="dataInfo" :isSelect="isSelect" :isCheckbox="isCheckbox" @tableRadioBtn="tableRadioBtn"
    @tableCheckboxBtn="tableCheckboxBtn" @searchBtn="getTbody">
    <template #search="{ search }">
      <template v-if="!isSelect">
        <ElFormItemBox label="规格状态" prop="state">
          <ElSelectBox :data="search" dataName="state" :all="{
            label: '全部',
            value: -1
          }" :options="options.state" />
        </ElFormItemBox>
        <ElFormItemBox label="启用状态" prop="isShowDisabled">
          <ElSelectBox :data="search" dataName="isShowDisabled" :all="{
            label: '全部',
            value: -1
          }" :options="options.isShowDisabled" />
        </ElFormItemBox>
      </template>
      <ElFormItemBox label="供应商" prop="supplierCode">
        <ElSelectBox :data="search" dataName="supplierCode" :options="options.supplier" />
      </ElFormItemBox>
    </template>
    <template #state="{ row }">
      <ElTagBox :data="row.state" :options="options.state" />
    </template>
    <template #isDisable="{ row }">
      <ElTagBox :data="row.isDisable" :options="options.isShowDisabled" />
    </template>
    <template #details="{ row }">
      {{ row.details?.length || 0 }}
    </template>
  </PageBox>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const props = withDefaults(
  defineProps<{
    isSelect?: boolean;//是否是选择页面
    isCheckbox?: boolean;//是否多选
    search?: any;//筛选条件
    thead?: any;//页面要求
    selectable?: Function;//筛选条件
    goodRow?: any;//物料code
  }>(),
  {

  },
);
const { dataInfo, getTbody, getTabs, options } = useListComponent(props);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
//多选数据
const tableCheckboxBtn = (arr: any) => {
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
onMounted(() => {
  getTabs()
});
</script>